---
import path from 'path';
import SiteHead from '@/components/SiteHead.astro';
import TheHeader from '@/components/TheHeader.vue';
import EditPage from '@/components/EditPage.vue';
import SponsorButton from '@/components/SponsorButton.vue';
import DocMenu from '@/components/DocMenu.vue';
import DocToc from '@/components/DocToc.vue';
import DocSearch from '@/components/DocSearch.vue';
import ContentWrapper from '@/components/ContentWrapper.vue';
import { buildMenu, Frontmatter } from '@/utils/seo';
import '@/styles/tailwind.css';
import '@/styles/page.css';

const { headings, frontmatter } = Astro.props;
const filePath = path.relative(path.resolve('../'), frontmatter.file);

const menu = [
  {
    title: 'guide',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/guide/*.mdx')),
  },
  {
    title: 'plugins',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/plugins/*.mdx')),

  },
  {
    title: 'examples',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/examples/*.mdx')),
  },
  {
    title: 'api reference',
    pages: buildMenu(await Astro.glob<Frontmatter>('../pages/api/*.mdx')),
  },
];

---

<html>
  <SiteHead {...Astro.props} />
  <body>
    <TheHeader client:load currentUrl={frontmatter.url} menu={menu}  />
    <div class="PageApp">
      <main class="main">
        <ContentWrapper>
          <slot />
        </ContentWrapper>

        <div class="mt-20 pt-2 border-t dark:border-gray-600 border-gray-200 flex items-center">
          <EditPage path={filePath} />

          <SponsorButton class="ml-auto" />
        </div>
      </main>

      <aside class="lside hidden lg:block px-5">
        <div class="sticky top-24"> 

          <DocSearch client:idle />
          <DocMenu currentUrl={frontmatter.url} menu={menu} />
        </div>
      </aside>

      <div class="rside hidden xl:block">
        <DocToc headings={headings} class="sticky top-24" />
      </div>
    </div>
  </body>
</html>
